import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools, PhotoSwipe, FilePicker } from 'weaver-mobile';
import { Comment } from 'weaver-mobile-page';
import { renderIsTop } from '../../public';
const getLabel = Tools.getLabel;

/* 个人中心 -> 我的发表 -> 我的帖子&我的待审批帖子 */
@withRouter
@inject('centerStore')
@observer
export default class MyPost extends React.Component {
	
  static defaultProps = {
    prefixCls: 'cowork-center-myPublish-myPost',
  }

  constructor(props) {
    super(props);
    this.state = {
      path: props.location.pathname + '/detail',
      coworkId: '',
      floor: '',
		}
		this.photoSwipeArr = []; //存放图片预览数组
	}
	
	componentDidMount() {
    this.photoSwipePreview();
  }

  componentDidUpdate(){
    this.photoSwipePreview();
  }

  /* 楼层跳转 */
  toFloorCowork = (data) => {
    this.setState({ coworkId: data.coworkId, floor: data.floorNum });
    this.props.history.push(`${this.state.path}?id=${data.coworkId}&&floor=${data.floorNum}`)
  }

  renderRightTop = (data) => {
    const Curs = 'cowork-comment';
    return (
      <div className={`${Curs}-renderRight`}>
        {data.isTop === '1' && renderIsTop}
        <span className={`${Curs}-renderRight-floor`} onClick={() => this.toFloorCowork(data)}>
          {data.floorNum && <a>#{data.floorNum}</a>}
        </span>
      </div>
    )
  }

  renderTopDefine = (data) => {
    const { prefixCls } = this.props;
    return (
      <div className={`${prefixCls}-topDefine`}>
        {getLabel(83258,'相关主题')}：
        <a onClick={() => {this.setState({ coworkId: data.coworkId });this.props.history.push(`${this.state.path}?id=${data.coworkId}`)}}>{data.coworkName}</a>
      </div>
    )
	}
	
/* 这个页面的comment加载加载下一页是自动触发的。所以没办法监听到变化。 */
	/* 图片查看相关功能 */
  photoSwipePreview = () => {
    setTimeout(() => {
			let msgArr = document.getElementsByClassName("wm-comment-content-msg");
      let imgArr = [];
      let imgArrTemp = [];
      for(let i = 0; i < msgArr.length; i++){
        imgArrTemp = msgArr[i].getElementsByTagName("img"); 
        for(let j = 0; j < imgArrTemp.length; j++){
          imgArr.push(imgArrTemp[j]);
        }
      }

			this.photoSwipeArr = [];
      for(let k = 0; k < imgArr.length; k++){
        this.photoSwipeArr.push({url: imgArr[k].src});
        imgArr[k].onclick = () => {this.onItemClick(k)};
			}
    }, 1000);
  }

  onItemClick = (index) => {
    this.setState({
      showImage: true,
      index: index
    });
    PhotoSwipe.showImage(this.photoSwipeArr, index);
  }
  
  openLink = (href) => {
    window.openLink(href);
  }
	
  render() {
    const { prefixCls, tagPage, centerStore: { publishStore } } = this.props;
    const { myPostComment, waitApproveComment } = publishStore;
    return (
      <div className={prefixCls}>
        <div className={`${prefixCls}-content`}>
          <Comment
            store={tagPage === 'myPost' ? myPostComment : waitApproveComment}
            renderRightTop={this.renderRightTop}
            renderTopDefine={this.renderTopDefine}
            operateAttachList={(type,data)=>this.openLink(data.url)}
          />
        </div>
        <div style={{display: 'none'}}>
          <FilePicker
            listType='img'
            files={this.photoSwipeArr}
          />
        </div>
      </div>
    )
  }
}